<template>
	<view  class="content" >
		<view class="tou" >
			<view  class="header" v-if="isdelu" >
				<image :src="loginInfo.avatarUrl"></image>
				<view class="information">
					<view class="wangming">
						<text>{{loginInfo.nickname}}</text>
					</view>
					<view class="zhanghao">
						<text>账号：{{loginInfo.telephone}}</text>
					</view>
					<view class="feet">
						<uni-popup ref="alertDialog" type="dialog">
							<uni-popup-dialog type="warn" cancelText="我再想想" confirmText="直接退出" title="警告"
								content="你确定要退出吗？" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
						</uni-popup>
					</view>
				</view>
			</view>
			<view class="middle"></view>
		</view>
		<view  class="foot">
			<uni-grid :column="3" :highlight="true" @change="change">
				<uni-grid-item >
					<view  class="grid-item-box" style="background-color: #fff;display: flex;flex-direction: column;">
						<image @click="order" src="../../static/订单.png" style="width: 70px;height: 70px;margin-left: 30px;margin-top: 20px;" ></image>
						<text class="text" style="margin-left: 45px;margin-top: 10px;font-size: 20px;">订单</text>
					</view>
				</uni-grid-item>
				<uni-grid-item >
					<view  class="grid-item-box" style="background-color: #fff;display: flex;flex-direction: column;">
						<image src="../../static/地图.png" style="width: 70px;height: 70px;margin-left: 30px;margin-top: 20px;" ></image>
						<text class="text" style="margin-left: 45px;margin-top: 10px;font-size: 20px;">地图</text>
					</view>
				</uni-grid-item>
				<uni-grid-item >
					<view  class="grid-item-box" style="background-color: #fff;display: flex;flex-direction: column;">
						<image @click="quit" src="../../static/退出登录.png" style="width: 70px;height: 70px;margin-left: 30px;margin-top: 20px;" ></image>
						<text class="text" style="margin-left: 25px;margin-top: 10px;font-size: 20px;">退出登录</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
</view >
</template>

<script setup>
	
	import {
		onMounted,
		ref
	} from 'vue';
	import {
			onShow
		} from '@dcloudio/uni-app'
	//判断是否登录
	const isdelu = ref(false)
	const islogin = () => {
		if (!uni.getStorageSync("loginInfo")) {
			uni.navigateTo({
				url: '/pages/denlu/denlu'
			})
		}else{
			isdelu.value = true
		}
	}
	onShow(() => {
		islogin()
		init()
		// query()

	})
	const loginInfo = ref({
		id: "",
		nickname: "",
		avatarUrl: "",
		telephone: ""
	})
	const init = () => {
		const info = uni.getStorageSync("loginInfo")
		if (info) {
			const object = JSON.parse(info)
			loginInfo.value.id = object.id
			loginInfo.value.nickname = object.nickname
			loginInfo.value.telephone = object.telephone
			loginInfo.value.avatarUrl = object.avatarUrl
		}
	}
	//提示框
	const alertDialog=ref()
	const quit = () => {
		alertDialog.value.open();
	}
	//提示框直接退出
	const dialogConfirm=()=>{
		uni.removeStorageSync('loginInfo');
		uni.redirectTo({
			url:'/pages/denlu/denlu'
		})
	}
	//下面的宫格
	 const order = ()=>{
		 uni.navigateTo({
		 	url: '/pages/order/order'
		 });
	 }
		
	
</script>

<style scoped>
	.header {
		height: 200px;
	}

	.header {
		display: flex;
		flex-direction: row;
		
	}

	.header image {
		width: 100px;
		height: 100px;
		margin-top: 30px;
		margin-left: 20px;

	}

	.wangming {
		margin-top: 30px;
		margin-left: 20px;
	}

	.wangming text {
		font-size: 30px;
		font-weight: bold;
	}

	.zhanghao {
		margin-top: 30px;
		margin-left: 20px;
	}

	.zhanghao text {
		font-size: 17px;
		color: grey;
	}

	.middle {
		height: 10px;
		background-image: url('../图片/背景图片.png');
	}
	.tou{
		background-image: url('../图片/背景图片.png');
	}

	.feet {
		margin-top: 20px;
		margin-left: 100px;
	}

	.feet button {
		width: 120px;
		height:50px;
	}
	.xinxi{
		display: flex;
		flex-direction: row;
		
	}
	.img{
		margin-top: 20px;
		margin-left: 10px;
	}
	.xinxi image{
		width: 130px;
		height: 100px;
		border-radius: 10px;
	}
	.xinxi .name{
		font-size: 20px;
		font-weight: bold;
		color: grey;
		margin-top: 0px;
		margin-left: 10px;
	}
	.xinxi .price{
		font-size: 15px;
		color: orange;
	
	}
	.zonjia{
		margin-top: 20px;
		margin-left: 20px;
	}
	.price{
		font-size: 20px;
		font-weight: bold;
	}
	.button3{
		margin-top: 10px;
		margin-left: 210px;
	}
	.button3 button{
		width: 100px;
		height: 45px;
		background-color: white;
	}
	.beijin{
		height: 10px;
		background-image: url('../图片/背景图片.png');
	}
	.wodedindan{
		font-size: 20px;
		margin-left: 20px;
	}
	.time text{
		color: grey;
		
	}
</style>